<template>
    <div id="app" :class="{ phoneAdapter_calss: isPhone }">
        <router-view />
        <div class="dis_loadding" v-if="isLoadding" :class="{ loadding: isLoadding }">
            <img class="img" src="./assets/loadding.png" />
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'app',
    computed: {
        ...mapState({
            isLoadding: state => state.isLoadding,
        }),
    },
    data() {
        return {
            isPhone: false,
        };
    },
    created() {
        this.isPhoneFunction();
    },
    mounted() {
        // if (this.isPhone) {
        //     this.$nextTick(() => {
        //         if ($('body').width() < $('body').height()) {
        //             this.$message.warning('请使用横屏模式浏览');
        //         }
        //     });
        // }
    },
    methods: {
        /**
         * 判断是否是手机用户登录，然后动态加载样式
         */
        isPhoneFunction() {
            let flag = navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            );
            if (flag) {
                this.isPhone = true;
                this.$store.commit('setIsPhone', this.isPhone);
                import('./style/phoneAdapter.scss').then(mode => {
                    console.log('手机适配');
                });
            }
        },
    },
};
</script>
<style lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    height: 100%;
    .dis_loadding {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        &.loadding {
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            .img {
                width: 40px;
                height: 40px;
                animation: rotateArround 3.5s linear 3s infinite normal;
            }
            @keyframes rotateArround {
                from {
                    transform: rotateZ(0deg);
                }
                to {
                    transform: rotateZ(360deg);
                }
            }
        }
    }
}
</style>
